<template>
  <div class="bind panel animated" :class="!isFollow?'fadeIn':'fadeOut'" v-if="!isFollow">
    <div class="dialog-panel">
      <ul class="content">
        <li>绑定江西联通,方可</li>
        <li>参与活动呦~</li>
        <li class="tip">(长按识别下方二维码关注)</li>
        <li class="wechat">
          <img :src="wechat" alt>
        </li>
      </ul>
      <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      wechat: require('@/assets/images/wechat.png')
    }
  },
  props: {
    isFollow: {
      type: Boolean,
      required: true
    }
  }
}
</script>
<style lang="less" scoped>
.bind {
  .dialog-panel {
    width: 588px;
    height: 592px;
    overflow: hidden;
    background: url("../assets/images/dialog-panel.png") no-repeat;
    background-size: 588px 592px;

    ul {
      margin: 90px 0;
      padding: 0 100px;
      width: 588px;
      height: 412px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      li {
        letter-spacing: 0.2em;
        line-height: 2em;
        font-weight: bold;
        color: #ffdecf;
        font-size: 30px;
      }
      .tip {
        font-size: 20px;
        margin-bottom: 10px;
      }
      .wechat {
        img {
          width: 240px;
        }
      }
      .bind-btn {
        margin-top: 100px;
        width: 405px;
        height: 83px;
        background: url("../assets/images/bind-btn.png") no-repeat center center;
        background-size: 90%;
      }
    }
  }
}
</style>
